<template>
	<view class="page" :style="{'height':h+'px','padding-bottom':(mt*2+56+30)+'px'}">
		<!-- 头部 -->
		<u-navbar title="订单详情" :leftIconSize="36" bgColor="#0bc4fa" leftIconColor="#ffffff" :titleStyle="titleStyle" @leftClick="returnBack"></u-navbar>
		<image class="bg" src="https://i.ringzle.com/file/20231025/87b08695ad8e42418fd81a98b2f742fe.jpg" mode=""></image>
		<view class="content" :style="{'margin-top':mt+'px'}">
			<view class="c_status">{{ocfg[object.status]}}</view>
			<view class="c_booking c_box" v-if="object.status==1||object.status==2">
				<view class="cb_title">立即预约游玩</view>
				<view class="cb_tip">节假日容易爆满，建议提前预约</view>
				<view class="cb_btn" @tap="toBooking">立即预约</view>
			</view>
			<view class="c_info c_box">
				<view class="ci_top">
					<view class="cit_l">
						<image src="https://i.ringzle.com/file/20231111/2df3adefe9b4420dbf9c0929b4b67a27.png"></image>
						<text>{{object.address}}</text>
					</view>
					<image class="cit_r" src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
				<view class="ci_ship">
					<view class="cis_l">
						<image :src="object.img"></image>
						<view class="cisl_info">
							<text>{{object.title}}</text>
							<text>{{object.tip}}</text>
						</view>
					</view>
					<view class="cis_r">
						<view>￥<span>{{object.price}}</span></view>
						<view>X {{object.num}}</view>
						<view>实付<span>￥</span><text>{{object.realPay}}</text></view>
					</view>
				</view>
				<view class="ci_code" v-if="object.status==1||object.status==2">
					<image :src="object.ewmImg"></image>
				</view>
				<view class="ci_bottom" v-if="object.status==1||object.status==2">
					<view class="cib_l">
						<view><span>{{ocfg[object.status]}}</span><text>{{object.expiredDate}}到期</text></view>
						<view>{{object.code}}</view>
					</view>
					<view class="cib_r" @tap="toRefund">
						申请退款
					</view>
				</view>
				<view class="ci_ytk" v-if="object.status==7">
					<view class="ciy_l">
						<view class="ciyl_l">
							<text>已退款</text>
							<text>已退回原账户</text>
						</view>
						<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
					</view>
					<view class="ciy_r">{{object.code}}</view>
				</view>
			</view>
			<view class="c_note c_box" v-if="object.status==1||object.status==2">
				<text>使用须知</text>
				<text>营业时间：{{object.yyTime}}</text>
				<text>上船地址：{{object.shipAddr}}</text>
			</view>
			<view class="c_order c_box" v-if="object.status==7">
				<view class="co_title">订单信息</view>
				<view class="co_item">
					<text>订单编号</text>
					<view class="coi_r">
						<text>{{object.orderNo}}</text>
						<view @tap="copyOrderNo(object.orderNo)">复制</view>
					</view>
				</view>
				<view class="co_item">
					<text>手机号码</text>
					<text>{{object.phone}}</text>
				</view>
				<view class="co_item">
					<text>下单时间</text>
					<text>{{object.createTime}}</text>
				</view>
			</view>
		</view>
		<view class="bottom" @tap="phoneShow=true" v-if="object.status==1||object.status==2">
			<image src="https://i.ringzle.com/file/20231111/907166d76acc4501b59e355e53ab712a.png"></image>
			<text>电话联系商家</text>
		</view>
		<view class="bottom bottom_btns" v-if="object.status==7">
			<view @tap="deleteOrder">删除订单</view>
			<view @tap="againBooking">再次预订</view>
		</view>
		<u-popup :show="phoneShow" @close="phoneShow=false">
			<view class="p_phone">
				<view class="pp_title">拨打电话</view>
				<view class="pp_tel" @tap="callPhone(object.shopPhone)">{{object.shopPhone}}</view>				
				<view class="pp_qx" @tap="phoneShow=false">取消</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getWindowInfo().windowHeight - 56,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#FFFFFF"
				},
				ocfg:this.$ocfg,
				id:'',
				object:{
					status:1,
					address:'北海朝阳海钓基地',
					img:'https://i.ringzle.com/file/20231111/4b53635d428a41288f7b831ed04be85f.png',
					title:'包船海钓(6小时)',
					tip:'随时退 过期退',
					price:2999,
					num:2,
					realPay:5998,
					ewmImg:'https://i.ringzle.com/file/20231111/b0b010a1864b4bb7969f6d6ac3f40585.png',
					expiredDate:'2023-11-10 23:59:59',
					code:'4377 4504 54',
					yyTime:'周一至周日 07:00-23:00',
					shipAddr:'舟山市嵊泗县五龙乡沿港路51号',
					shopPhone:'18766678965',
					orderNo:'6522870321821b97C67A86f8',
					phone:'18766663256',
					createTime:'2023-11-09 13:36:53'
				},
				phoneShow:false
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id;
				this.getDetails();
			}
		},
		methods: {
			getDetails(){
				console.log(this.id,'id');
			},
			toBooking(){
				uni.navigateTo({
					url:'/pagesMy/seaFishingOrder/onlineBooking?object='+JSON.stringify({
						id:this.id,
						title:this.object.title,
						merchant:this.object.address
					})
				})
			},
			returnBack(){
				uni.redirectTo({
					url:'/pagesMy/seaFishingOrder/index'
				})
			},
			//申请退款
			toRefund(){
				uni.navigateTo({
					url:'/pagesMy/seaFishingOrder/applyRefund?object='+JSON.stringify({
						id:this.id,
						title:this.object.title,
						price:this.object.price,
						num:this.object.num
					})
				})
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			deleteOrder(){
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			againBooking(){
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			copyOrderNo(no){
				let that = this;
				// #ifdef H5
				this.$copyText(no).then(res=>{
					this.$showToast('复制成功');
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data:no,
					success(res) {
						that.$showToast('复制成功');
					},
					fail(err) {
						that.$showToast('复制失败');
					}
				})
				// #endif
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/.u-popup__content{
		border-radius: 32rpx 32rpx 0 0;
	}
	
	.page{
		background: #F5F8FA;
		.bg {
			width: 100%;
			height: 710rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		.content{
			width: 100%;
			position: relative;
			padding: 0 24rpx;
			box-sizing: border-box;
			.c_status{
				width: 100%;
				padding: 30rpx 16rpx 4rpx;
				box-sizing: border-box;
				background: transparent;
				font-size: 44rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			
			.c_box{
				background: #FFFFFF;
				border-radius: 16rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
			}
			
			.c_booking{
				padding: 36rpx 24rpx;
				.cb_title{
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
				.cb_tip{
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.cb_btn{
					width: 100%;
					height: 76rpx;
					background: #01B9F9;
					border-radius: 16rpx;
					margin-top: 24rpx;
					line-height: 76rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
			}
			
			.c_info{
				.ci_top{
					width: 100%;
					height: 89rpx;
					background: #F5F8FA;
					border-radius: 16rpx 16rpx 0 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 24rpx;
					box-sizing: border-box;
					.cit_l{
						display: flex;
						align-items: center;
						image{
							width: 36rpx;
							height: 36rpx;
						}
						text{
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
							margin-left: 19rpx;
						}
					}
					.cit_r{
						width: 30rpx;
						height: 30rpx;
					}
				}
				.ci_ship{
					padding: 30rpx 24rpx 0;
					width: 100%;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					.cis_l{
						display: flex;
						image{
							width: 124rpx;
							height: 124rpx;
						}
						.cisl_info{
							padding:10rpx 0 0 20rpx;
							display: flex;
							flex-direction: column;
							text{
								font-size: 28rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;
								&:last-child{
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #666666;
									margin-top: 24rpx;
								}
							}
						}
					}
					.cis_r{
						display: flex;
						flex-direction: column;
						view{
							display: flex;
							align-items: center;
							justify-content: flex-end;
							&:first-child{
								font-size: 20rpx;
								font-family: PingFang-SC-Regular, PingFang-SC;
								font-weight: 400;
								color: #333333;
								span{
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
								}
							}
							&:nth-child(2){
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-top: 19rpx;
							}
							&:last-child{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								span{
									font-size: 20rpx;
								}
								text{
									font-size: 32rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
								}
							}
						}
					}
				}
				.ci_code{
					padding-top: 56rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 277rpx;
						height: 277rpx;
					}
				}
				.ci_bottom{
					width: 100%;
					padding: 42rpx 24rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					.cib_l{
						view{
							&:first-child{
								display: flex;
								align-items: center;
								span{
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
								}
								text{
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #808080;
									margin-left: 10rpx;
								}
							}
							&:last-child{
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;
								margin-top: 24rpx;
							}
						}
					}
					.cib_r{
						width: 152rpx;
						height: 58rpx;
						border-radius: 11rpx;
						border: 1rpx solid #CCCCCC;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
				}
				.ci_ytk{
					padding: 40rpx 24rpx;
					margin-top: 23rpx;
					box-sizing: border-box;
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					.ciy_l{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.ciyl_l{
							text{
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;
								&:last-child{
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #808080;
									margin-left: 10rpx;
								}
							}
						}
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
					.ciy_r{
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #AAAAAA;
						text-decoration: line-through;
						padding-top: 24rpx;
					}
				}
			}
			
			.c_note{
				width: 100%;
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				text{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top: 30rpx;
					&:first-child{
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						margin-top: 0;
					}
				}
			}
			.c_order{
				width: 100%;
				padding: 40rpx 24rpx;
				.co_title{
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
				.co_item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;
					&>text{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						&:last-child{
							color: #333333;
						}
					}
					.coi_r{
						display: flex;
						align-items: center;
						text{
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
						view{
							width: 78rpx;
							height: 36rpx;
							border-radius: 18rpx;
							border: 1rpx solid #CCCCCC;
							margin-left: 7rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							letter-spacing: 2rpx;
						}
					}
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 112rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0,0,0,0.06);
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			text{
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-left: 24rpx;
			}
			&.bottom_btns{
				padding: 0 25rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					width: calc(50% - 15rpx);
					height: 80rpx;
					border-radius: 46rpx;
					border: 1rpx solid #CCCCCC;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					&:last-child{
						border: 1rpx solid #007A69;
						color: #007A69;
					}
				}
			}
		}
	
		.p_phone{
			&>view{
				text-align: center;
				width: 100%;
				&.pp_title{
					padding: 30rpx 0;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				&.pp_tel{
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					padding: 28rpx 0 33rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #01B9F9;
				}
				&.pp_qx{
					padding: 31rpx 0 99rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					border-top: 20rpx solid #F5F7F8;
				}
			}
		}
	}
</style>